import React from 'react';
import './Sidebar.css';

interface Category {
    id: string;
    name: string;
    icon?: string;
    color?: string;
    channel_count: number;
    is_default: boolean;
    sort_order: number;
}

interface SidebarProps {
    currentCategory: string;
    onCategoryChange: (categoryName: string) => void;
    onAddCategory: (categoryName: string) => void;
    onOpenChannelManager: () => void;
    categories: Category[]; // New prop
}

const Sidebar: React.FC<SidebarProps> = ({
    currentCategory,
    onCategoryChange,
    onAddCategory,
    onOpenChannelManager,
    categories, // Destructure new prop
}) => {
    const handleAddCategory = () => {
        const input = document.getElementById('newCategoryInput') as HTMLInputElement;
        const categoryName = input.value.trim();
        if (categoryName) {
            onAddCategory(categoryName);
            input.value = '';
        }
    };

    return (
        <div className="sidebar">
            <div className="category-section">
                <h3>频道分类</h3>
                <ul className="category-list">
                    {categories.map((category) => (
                        <li
                            key={category.id} // Use category.id as key
                            className={`category-item ${currentCategory === category.name ? 'active' : ''}`}
                            onClick={() => onCategoryChange(category.name)}
                            data-category={category.name}
                        >
                            <span>{category.icon} {category.name}</span>
                            <span className="category-count">{category.channel_count}</span>
                        </li>
                    ))}
                </ul>
            </div>

            <div className="category-management">
                <h3>管理分类</h3>
                <div className="add-category">
                    <input type="text" placeholder="添加新分类..." id="newCategoryInput" />
                    <button className="btn btn-primary" onClick={handleAddCategory}>添加</button>
                </div>
                <button className="btn btn-secondary" onClick={onOpenChannelManager}>管理频道分类</button>
            </div>
        </div>
    );
};

export default Sidebar;